<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="../css/order.css"/>
</head>
<body class="gray">
	<div class="mui-content detail mui-scroll-wrapper" style="padding-bottom: 50px;">
	    <div class="mui-scroll loading" id="vueMain">
	    		<ul class="mui-table-view">
		        <li class="mui-table-view-cell mui-media">
		        		<a href="javascript:;">
	    		            <img class="mui-media-object mui-pull-left" :src="list.img" />
	    		            <div class="mui-media-body">
	    		                <div class="name">{{list.name}}</div>
	    		                <p>所属类型:{{list.commend_name}}</p>
	    		                <!--<p>所属分类:{{list.category_name}}</p>-->
	    		                <!--<p>服务城市:{{list.city_name}}</p>-->
	    		            </div>
	    		        </a>
		        </li>
	    		</ul>
	    		<ul class="mui-table-view itemlist">
	    			<li class="mui-table-view-cell" v-if="list.activity_type[2]">
		        		<div class="mui-pull-right">
		        			<!--{{splitType(list.activity_type[2])}}-->
		        		</div>
		        		<div class="mui-pull-left">
		        			计划人数
		        		</div>
		        </li>
		        <li class="mui-table-view-cell">
		        		<div class="mui-pull-right">
		        			归还时间
		        			<p>{{splitDate(list.activity_time,1)}}</p>
		        		</div>
		        		<div class="mui-pull-left">
		        			租赁日期
		        			<p>{{splitDate(list.activity_time,0)}}</p>
		        		</div>
		        </li>
		        <li class="mui-table-view-cell">
		        		<div class="mui-pull-right">
		        			{{splitType(list.activity_type[0])}}
		        		</div>
		        		<div class="mui-pull-left">
		        			类型
		        		</div>
		        </li>
		        <li class="mui-table-view-cell">
		        		<div class="mui-pull-right">
		        			{{splitType(list.activity_type[1])}}
		        		</div>
		        		<div class="mui-pull-left">
		        			预算
		        		</div>
		        </li>
		    </ul>
		    
		    <div class="mui-input-row" style="background: #FFF;margin-top: 10px;padding:10px 0">
	            <label>订金报价</label>
	            <input type="number" class="mui-input-clear" v-model="num1" placeholder="请输入您的订金"  />
	        </div>
	        <div class="mui-input-row" style="background: #FFF;margin-top: 10px;padding:10px 0">
	            <label>总额</label>
	            <input type="number" class="mui-input-clear" v-model="num" placeholder="请输入您的报价" />
	        </div>
	        
	        <div class="mui-content-padded" style="padding: 25px 0;">
		    		<button type="button" class="mui-btn mui-btn-block bexta-btn bexta-btn-red tijiao" >提交</button>
		    </div>
	    </div>
	</dov>
<script src="../js/mui.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/bexta.js"></script>
<script type="text/javascript">
	var apps, views, merchant;
	mui.init();
	mui.plusReady(function () {
		views = bexta.getWebview();
		merchant = bexta.getStorage(MERCHANT);
		bexta.ajax(api.consult_order_detail, function(res){
			initVue(res);
		}, {data:{uid:merchant.uid, id:views.eid}});
	});
	function initVue(res){
		apps = new Vue({
			el:"#vueMain",
			data:{
				list:res,
				num:'',
				num1:''
			},
			methods:{
				splitDate:function(v,idx){
					return v.split('至')[idx];
				},
				splitType:function(v){
					return v.split('*')[1];
				}
			},
			mounted:function(){
				document.querySelector('.loading').classList.add('loadRun');
				mui('.mui-scroll-wrapper').scroll();
				var self = this;
				document.querySelector('.tijiao').addEventListener('tap', function(){
					if( !self.num1 || self.num1 < 1 || !(/^[0-9]*$/.test(self.num1)) ){
						mui.toast("金额请使用数字");
						return ; 
					}
					if( !self.num || self.num < 1 || !(/^[0-9]*$/.test(self.num)) ){
						mui.toast("金额请使用数字");
						return ; 
					}
					bexta.ajax(api.replay_consult, function(res,msg){
						mui.toast(msg);
						if( !res ){
							views.opener().evalJS('plus.webview.currentWebview().reload()');
							mui.later(function(){
								mui.back();
							},1000);
						}
					}, {data:{uid:merchant.uid, id:self.list.id, money:self.num,pay_fee:self.num1}});
				});
				
			}
		});
	}

</script>
</body>
</html>
